@import (once) "variables";
@import (once) "utils";

.pagination {
	display: block;
	margin: .625rem 0;
	.clear-float;

	& > .item {
		display: block;
		float: left;
		margin-left: .0652rem;
		padding: 0.25rem .625rem;
		background-color: @white;
		cursor: pointer;
		border: 1px @grayLighter solid;
		text-align: center;
		font-size: .875rem;
        color: @dark;

		&:first-child {
			margin-left: 0 ;
		}

		&.current, &.active {
			background-color: @cyan;
			border-color: @lightCyan;
			color: @white;
			.text-shadow;
		}

		&:hover {
			background-color: lighten(@cyan, 20%);
			border-color: lighten(@cyan, 20%);
			color: @white;
		}

		&:disabled, &.disabled {
			cursor: default;
			background-color: @grayLighter;
			border-color: @grayLighter;
			color: @grayLight;
		}

		&.spaces {
			border: 0;
			cursor: default;
            color: @dark ;
			&:hover {
				background-color: inherit ;
				color: @dark;
			}
		}
	}

	&.rounded {
		& > .item {
			border-radius: .3125rem;
		}
	}

	&.cycle {
		& > .item {
			width: 28px;
			height: 28px;
			border-radius: 50%;
			font-size: .7rem;
			padding: .4375rem 0;
		}
	}

	&.no-border {
		& > .item {
			border: 0;

			&:hover {
				color: @lightCyan;
				background-color: transparent ;
			}

			&:disabled, &.disabled {
				cursor: default;
				background-color: transparent;
				border-color: @transparent;
				color: @grayLight;
			}

			&.current, &.active {
				//border-radius: 50%;
				&:hover {
					background-color: lighten(@cyan, 20%) ;
					border-color: lighten(@cyan, 20%) ;
					color: @white ;
				}
			}
		}
	}
}